<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">

        <p v-if="status===1">当status为1时显示该行</p>
        <p v-else-if="status===2">当status为2时显示该行</p>
        <p v-else>否则显示该行</p>
        <!-- 一次判断多个元素，使用vue的内置组件 -->
        <template v-if="status===1">
            <p>这是一段文本</p>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
        </template>

        <!-- vue在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染 -->
        <template v-if="type==='name'">
            <label for="">用户名：</label>
            <input  placeholder="输入用户名">
        </template>
        <template v-else>
            <label for="">邮箱：</label>
            <input  placeholder="输入邮箱">
        </template>
        <!-- 点击事件 handleToggleClick()方法是用于切换type的类型 -->
        <button @click="handleToggleClick">切换输入类型</button>
        <hr>
        <!-- Vue.js 提供key属性 它可以让你自己决定是否要复用元素，key必须是唯一的 -->
        <template v-if="type==='name'">
            <label for="">QQ:</label>
            <input  placeholder="QQ" key="name-input">
        </template>
        <template v-else>
            <label for="">密码：</label>
            <input  placeholder="输入密码" key="mail-input">
        </template>
        <button @click="handleToggleClick">切换输入类型</button>
        <hr>
        <p>v-show</p>
        <!-- v-show 是改变元素的css属性display[显示] -->
        <p v-show="show===1">当status为1时显示该行</p>
    </div>


    <script>
        var app = new Vue({
            el: '#app',
            data: {
                status: 1,
                type: 'name',
                show: 1

            },
            methods: {
                handleToggleClick: function() {
                    this.type = this.type === 'name' ? 'mail' : 'name'
                }
            }
        })
    </script>
</body>

</html>